<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo2</title>
    <script type="text/javascript" src="./jquery.js"></script>
    <script type="text/javascript" src="./handlebars.js"></script>
</head>

<div class="demo">
        <script id="tpl" type="text/x-handlebars-template">
            <div class="tpldemo">
                <h1 style="color:{{color}}">{{demo1}}</h1>
                <p>{{desc}}</p>
            </div>
        </script>
    </div>  
<script type="text/javascript">
    var context = {
        "demo1": "this is a demo",
        "desc": "study Handlebars",
        "color": "red"
    };
    //1. 获取模板内容
    var tpl = $("#tpl").html();
    //2. 预编译模板
    var template = Handlebars.compile(tpl);
    //3. 模板数据填充
    var html = template(context);
    //4. 将结果追加到页面中
    $(".demo").html(html);
</script>